<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/tex-mml-chtml.js" async></script>
    <style>
        body {
            background-color: transparent;
            font-family: Arial, sans-serif;
        }
    </style>
    <script type="text/javascript">
        function updateFormula(angle, radius, answer, unit) {
            document.getElementById("detailed").innerHTML = "$$ \\begin{align}Area \\quad of \\quad Sector &= \\frac{central \\quad angle}{360°} \\times \\pi \\times (radius)^{2}  \\\\&=\\frac{Q\\times \\pi \\times r^{2} }{360°}\\\\ &= \\frac{" +  angle + "\\times \\pi \\times " + radius + "^{2} }{360°} = " + answer + "\\quad " + unit + "\\end{align} $$";
            MathJax.typeset();
        }
    </script>
</head>
<body>
<div id="detailed">$$ \begin{align}Area \quad of \quad Sector &= \frac{central \quad angle}{360°} \times \pi \times (radius)^{2}  \\&=\frac{Q\times \pi \times r^{2} }{360°}\\ &= \end{align} $$</div>
</body>
</html>